<template>
  <div id="main">
    <div id="" class="card">
      <div style="width: 100%; height: 50px ">
        <!--查询条件-->
        <el-form :inline="true" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
          <el-form-item label="订单编号:">
            <el-input v-model="queryVo.orderId" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="订单进度:">
            <el-select v-model="queryVo.conveyTag" >
              <el-option
                  v-for="item in option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-tiem>
            <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
          </el-form-tiem>
        </el-form>
      </div>
      <div>
        <div class="page">
          <el-button icon="el-icon-refresh" circle ></el-button>
        </div>
      </div>
      <!--数据表格-->
      <el-table
          :data="order"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="订单编号"
            width="160">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view">{{scope.row.id}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="userName"
            label="下单用户(账号)"
            width="160">
          <template slot-scope="scope">
            <el-button type="text">{{scope.row.userName+"("+scope.row.userAccount+")"}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="merchantName"
            label="接单商户"
            width="160">
        </el-table-column>
        <el-table-column
            prop="totalAmount"
            label="总金额"
            width="160">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="下单时间"
            width="160">
        </el-table-column>
        <el-table-column
            prop="conveyTag"
            label="订单进度"
            width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.conveyTag=='P001-1'">待发货</span>
            <span v-else-if="scope.row.conveyTag=='P001-2'" style="color: #F56C6C">待收货</span>
            <span v-else-if="scope.row.conveyTag=='P001-3'" style="color: #67C23A">已完成</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页插件-->
      <div id="cell" class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "QueryAll",
  data() {
    return {
      //添加按钮的显示属性
      add_display:false,
      //修改按钮显示属性
      upd_display:false,
      details_div:false,
      //弹窗参数
      dialogVisible: false,
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
      // 仓库类型
      // 查询条件
      queryVo: {
       orderId:'',
        conveyTag:''
      },
      //仓库数据
      order: [],
      //订单进度
      option:[
        {
          value:'P001-1',
          label:'待发货'
        },
        {
          value:'P001-2',
          label:'待收货'
        },
        {
          value:'P001-3',
          label:'已收货'
        }
      ],
    }
  },
  created(){
    this.selGather()
    this.query()
  },
  methods: {
    //弹窗关闭判断方法
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    //查询所有仓库列表
    async query() {
      const {data: res} = await this.$http.post
      (`/order/list/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.order = res.list
      this.total = res.total
      console.log(res)
    },
    //查询所有仓库类型
    async selGather(){
      const {data : res}=await this.$http.post
      (`/gatherType/list`)
      this.gatherType=res
      console.log(res)
    },
    handleChange(value) {
      console.log(value);
    },
  }
}
</script>

<style >
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-icon svg {
  height: 1em;
  width: 1em;
}
.el-drawer .el-drawer__header span {
  font-size: 17px;
  line-height: 17px;
  color: black !important;
}
.el-drawer .el-drawer__header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}
</style>